<template>
	<div class="wai">
		<div class="left">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>保存列表</span>
					<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
				</div>
				<div v-for="o in items" :key="o.id" class="text item">
					{{o.header}}
				</div>
			</el-card>
		</div>
		<div class="wrap">
			<el-input type="text" placeholder="请输入题目" v-model="text" maxlength="10" show-word-limit>
			</el-input>
			<div style="margin: 20px 0;"></div>
			<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea">
			</el-input>
			<br /><br />
			<template>
				<el-button :plain="true" @click="open">保存笔记</el-button>
			</template>
		</div>

	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'Application',
		data() {
			return {
				text: '',
				textarea: '',
				items: ''
			}
		},
		created() {
			this.loading()
		},
		methods: {
			loading() {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/queryNoteBook',
					//请求方式
					method: 'post',
				}).then(
					res => {
						//登录成功
						this.items = res.data.resp
					},
					err => {
						console.log(err.message)
					}
				)
			},
			open() {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/insertSelective',
					//请求方式
					method: 'post',
					params: {
						header: this.text,
						content: this.textarea
					}
				}).then(
					res => {
						//登录成功
						this.$message('保存成功');
						this.loading()
						this.text = ''
						this.textarea = ''
					},
					err => {
						console.log(err.message)
					}
				)

			},
			openVn() {
				const h = this.$createElement;
				this.$message({
					message: h('p', null, [
						h('span', null, '内容可以是 '),
						h('i', {
							style: 'color: teal'
						}, 'VNode')
					])
				});
			}
		}
	}
</script>

<style scoped>
	.wai {
		margin: 0 auto;
		width: 60%;
		margin-top: 50px;
		height: 100px;
	}

	.left {
		margin: 0 auto;
		float: left;
	}

	.wrap {
		margin: 0 auto;
		width: 50%;
		margin-left: 5px;
		float: left;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 480px;
	}
</style>
